<template>
  <view class="login">
    <view class="login-content">
      <text class="title">华为登录</text>
      
      <!-- 登录按钮 -->
      <button class="login-btn" @click="huaweiLogin" :loading="loading">
        {{ loading ? '登录中...' : '点击登录' }}
      </button>
      
      <!-- 登录状态显示 - 使用统一样式 -->
      <view class="status-container">
        <text class="status">{{ status || '点击上方按钮开始登录' }}</text>
      </view>
      
      <!-- 重置按钮 -->
      <button class="reset-btn" @click="resetLogin">重置</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 响应式状态
const loading = ref(false);
const status = ref('');

// 重置登录状态
const resetLogin = () => {
  loading.value = false;
  status.value = '';
};

// 华为登录
const huaweiLogin = async () => {
  // 重置状态
  resetLogin();
  
  // 更新状态
  loading.value = true;
  status.value = '登录中...';
  
  try {
    // 1. 获取华为登录code
    status.value = '正在获取华为授权码...';
    
    const loginRes = await new Promise<any>((resolve, reject) => {
      uni.login({
        provider: 'huawei',
        success: resolve,
        fail: reject
      });
    });
    
    // 检查是否获取到code
    if (!loginRes || !loginRes.code) {
      throw new Error('获取华为授权码失败');
    }
    
    console.log('华为登录code:', loginRes.code);
    status.value = '获取授权码成功，正在登录...';
    
    // 2. 模拟调用后端登录接口
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    status.value = '登录成功！正在跳转...';
    
    uni.showToast({ 
      title: '登录成功', 
      icon: 'success',
      duration: 2000 
    });
    
    // 3. 登录成功后跳转到UserInfo页面
    setTimeout(() => {
      uni.navigateTo({ 
        url: '/pages/Login/UserInfo',
        success: () => {
          console.log('成功跳转到用户信息页面');
        },
        fail: (err) => {
          console.error('跳转失败:', err);
          status.value = `登录成功，但跳转失败: ${err.errMsg}`;
        }
      });
    }, 1500);
    
  } catch (error) {
    console.error('华为登录失败:', error);
    
    if (error instanceof Error) {
      status.value = `登录失败: ${error.message}`;
    } else {
      status.value = '登录失败: 未知错误';
    }
    
    uni.showToast({ 
      title: '登录失败', 
      icon: 'none',
      duration: 3000 
    });
    
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.login {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-content {
  width: 100%;
  max-width: 600rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  display: block;
}

/* 按钮样式 */
.login-btn {
  background-color: #1e88e5;
  color: white;
  border-radius: 80rpx;
  font-size: 32rpx;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  margin: 20rpx 0;
}

.reset-btn {
  margin-top: 30rpx;
  font-size: 28rpx;
  padding: 0;
  height: 60rpx;
  line-height: 60rpx;
}

/* 状态容器样式 */
.status-container {
  margin: 30rpx 0;
  min-height: 40rpx;
}

/* 状态文本样式 - 统一样式 */
.status {
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 20rpx;
}
</style>